M

MLOG

فارسی

با کاوش الگوهای پیشرفته برای ورکرهای ماژول جاوااسکریپت، پردازش پس‌زمینه را بهینه کرده و عملکرد و تجربه کاربری اپلیکیشن‌های وب را برای مخاطبان جهانی بهبود بخشید.

ورکرهای ماژول جاوااسکریپت: تسلط بر الگوهای پردازش پس‌زمینه برای چشم‌انداز دیجیتال جهانی

در دنیای متصل امروز، به طور فزاینده‌ای از اپلیکیشن‌های وب انتظار می‌رود که تجربیات یکپارچه، واکنش‌گرا و با کارایی بالا را، صرف‌نظر از موقعیت مکانی کاربر یا قابلیت‌های دستگاه، ارائه دهند. یک چالش مهم در دستیابی به این هدف، مدیریت وظایف محاسباتی سنگین بدون فریز کردن رابط کاربری اصلی است. اینجاست که Web Workers جاوااسکریپت وارد عمل می‌شوند. به طور خاص، ظهور ورکرهای ماژول جاوااسکریپت (JavaScript Module Workers) رویکرد ما به پردازش پس‌زمینه را متحول کرده و روشی قوی‌تر و ماژولارتر برای تخلیه وظایف ارائه می‌دهد.

این راهنمای جامع به قدرت ورکرهای ماژول جاوااسکریپت می‌پردازد و الگوهای مختلف پردازش پس‌زمینه را که می‌توانند به طور قابل توجهی عملکرد و تجربه کاربری اپلیکیشن وب شما را بهبود بخشند، بررسی می‌کند. ما مفاهیم اساسی، تکنیک‌های پیشرفته را پوشش خواهیم داد و مثال‌های عملی با در نظر گرفتن چشم‌انداز جهانی ارائه خواهیم کرد.

تکامل به سمت ورکرهای ماژول: فراتر از وب ورکرهای پایه‌ای

پیش از پرداختن به ورکرهای ماژول، درک پیشینه آن‌ها یعنی وب ورکرها (Web Workers) بسیار مهم است. وب ورکرهای سنتی به شما اجازه می‌دهند کد جاوااسکریپت را در یک نخ (thread) پس‌زمینه جداگانه اجرا کنید و از مسدود شدن نخ اصلی جلوگیری کنید. این قابلیت برای وظایفی مانند موارد زیر بسیار ارزشمند است:

با این حال، وب ورکرهای سنتی محدودیت‌هایی داشتند، به‌ویژه در زمینه بارگذاری و مدیریت ماژول‌ها. هر اسکریپت ورکر یک فایل واحد و یکپارچه بود که وارد کردن و مدیریت وابستگی‌ها را در زمینه ورکر دشوار می‌کرد. وارد کردن چندین کتابخانه یا شکستن منطق پیچیده به ماژول‌های کوچکتر و قابل استفاده مجدد، دست‌وپاگیر بود و اغلب به فایل‌های ورکر حجیم منجر می‌شد.

ورکرهای ماژول این محدودیت‌ها را با اجازه دادن به مقداردهی اولیه ورکرها با استفاده از ماژول‌های ES (ES Modules) برطرف می‌کنند. این بدان معناست که شما می‌توانید ماژول‌ها را مستقیماً در اسکریپت ورکر خود وارد (import) و صادر (export) کنید، درست همانطور که در نخ اصلی این کار را انجام می‌دهید. این امر مزایای قابل توجهی به همراه دارد:

مفاهیم اصلی ورکرهای ماژول جاوااسکریپت

در اصل، یک ورکر ماژول مشابه یک وب ورکر سنتی عمل می‌کند. تفاوت اصلی در نحوه بارگذاری و اجرای اسکریپت ورکر است. به جای ارائه یک URL مستقیم به یک فایل جاوااسکریپت، شما یک URL ماژول ES ارائه می‌دهید.

ایجاد یک ورکر ماژول پایه‌ای

در اینجا یک مثال اساسی از ایجاد و استفاده از یک ورکر ماژول آورده شده است:

worker.js (اسکریپت ورکر ماژول):


// worker.js

// این تابع زمانی اجرا می‌شود که ورکر پیامی دریافت کند
self.onmessage = function(event) {
  const data = event.data;
  console.log('پیام در ورکر دریافت شد:', data);

  // انجام یک وظیفه پس‌زمینه
  const result = data.value * 2;

  // ارسال نتیجه به نخ اصلی
  self.postMessage({ result: result });
};

console.log('ورکر ماژول مقداردهی اولیه شد.');

main.js (اسکریپت نخ اصلی):


// main.js

// بررسی پشتیبانی از ورکرهای ماژول
if (window.Worker) {
  // ایجاد یک ورکر ماژول جدید
  // توجه: مسیر باید به یک فایل ماژول اشاره کند (اغلب با پسوند .js)
  const myWorker = new Worker('./worker.js', { type: 'module' });

  // گوش دادن به پیام‌های ورکر
  myWorker.onmessage = function(event) {
    console.log('پیام از ورکر دریافت شد:', event.data);
  };

  // ارسال پیام به ورکر
  myWorker.postMessage({ value: 10 });

  // شما همچنین می‌توانید خطاها را مدیریت کنید
  myWorker.onerror = function(error) {
    console.error('خطای ورکر:', error);
  };
} else {
  console.log('مرورگر شما از وب ورکرها پشتیبانی نمی‌کند.');
}

نکته کلیدی در اینجا گزینه `{ type: 'module' }` هنگام ایجاد نمونه `Worker` است. این به مرورگر می‌گوید که URL ارائه شده (`./worker.js`) را به عنوان یک ماژول ES در نظر بگیرد.

ارتباط با ورکرهای ماژول

ارتباط بین نخ اصلی و یک ورکر ماژول (و بالعکس) از طریق پیام‌ها صورت می‌گیرد. هر دو نخ به متد `postMessage()` و رویداد `onmessage` دسترسی دارند.

برای ارتباطات پیچیده‌تر یا مکرر، الگوهایی مانند کانال‌های پیام (message channels) یا ورکرهای اشتراکی (shared workers) ممکن است در نظر گرفته شوند، اما برای بسیاری از موارد استفاده، `postMessage` کافی است.

الگوهای پیشرفته پردازش پس‌زمینه با ورکرهای ماژول

اکنون، بیایید بررسی کنیم که چگونه از ورکرهای ماژول برای وظایف پردازش پس‌زمینه پیچیده‌تر استفاده کنیم، با استفاده از الگوهایی که برای یک پایگاه کاربری جهانی قابل اجرا هستند.

الگوی ۱: صف‌های وظیفه و توزیع کار

یک سناریوی رایج، نیاز به انجام چندین وظیفه مستقل است. به جای ایجاد یک ورکر جداگانه برای هر وظیفه (که می‌تواند ناکارآمد باشد)، می‌توانید از یک ورکر واحد (یا یک استخر از ورکرها) با یک صف وظیفه استفاده کنید.

worker.js:


// worker.js

let taskQueue = [];
let isProcessing = false;

async function processTask(task) {
  console.log(`در حال پردازش وظیفه: ${task.type}`);
  // شبیه‌سازی یک عملیات محاسباتی سنگین
  await new Promise(resolve => setTimeout(resolve, task.duration || 1000));
  return `وظیفه ${task.type} تکمیل شد.`;
}

async function runQueue() {
  if (isProcessing || taskQueue.length === 0) {
    return;
  }

  isProcessing = true;
  const currentTask = taskQueue.shift();

  try {
    const result = await processTask(currentTask);
    self.postMessage({ status: 'success', taskId: currentTask.id, result: result });
  } catch (error) {
    self.postMessage({ status: 'error', taskId: currentTask.id, error: error.message });
  } finally {
    isProcessing = false;
    runQueue(); // پردازش وظیفه بعدی
  }
}

self.onmessage = function(event) {
  const { type, data, taskId } = event.data;

  if (type === 'addTask') {
    taskQueue.push({ id: taskId, ...data });
    runQueue();
  } else if (type === 'processAll') {
    // تلاش فوری برای پردازش وظایف در صف
    runQueue();
  }
};

console.log('ورکر صف وظیفه مقداردهی اولیه شد.');

main.js:


// main.js

if (window.Worker) {
  const taskWorker = new Worker('./worker.js', { type: 'module' });
  let taskIdCounter = 0;

  taskWorker.onmessage = function(event) {
    console.log('پیام ورکر:', event.data);
    if (event.data.status === 'success') {
      // مدیریت تکمیل موفقیت‌آمیز وظیفه
      console.log(`وظیفه ${event.data.taskId} با نتیجه زیر به پایان رسید: ${event.data.result}`);
    } else if (event.data.status === 'error') {
      // مدیریت خطاهای وظیفه
      console.error(`وظیفه ${event.data.taskId} ناموفق بود: ${event.data.error}`);
    }
  };

  function addTaskToWorker(taskData) {
    const taskId = ++taskIdCounter;
    taskWorker.postMessage({ type: 'addTask', data: taskData, taskId: taskId });
    console.log(`وظیفه ${taskId} به صف اضافه شد.`);
    return taskId;
  }

  // مثال استفاده: افزودن چندین وظیفه
  addTaskToWorker({ type: 'image_resize', duration: 1500 });
  addTaskToWorker({ type: 'data_fetch', duration: 2000 });
  addTaskToWorker({ type: 'data_process', duration: 1200 });

  // به صورت اختیاری پردازش را فعال کنید (مثلاً با کلیک دکمه)
  // taskWorker.postMessage({ type: 'processAll' });

} else {
  console.log('وب ورکرها در این مرورگر پشتیبانی نمی‌شوند.');
}

ملاحظات جهانی: هنگام توزیع وظایف، بار سرور و تأخیر شبکه را در نظر بگیرید. برای وظایفی که شامل APIهای خارجی یا داده‌ها هستند، مکان‌ها یا مناطق ورکر را طوری انتخاب کنید که زمان پینگ را برای مخاطبان هدف شما به حداقل برساند. به عنوان مثال، اگر کاربران شما عمدتاً در آسیا هستند، میزبانی اپلیکیشن و زیرساخت ورکر شما در نزدیکی آن مناطق می‌تواند عملکرد را بهبود بخشد.

الگوی ۲: تخلیه محاسبات سنگین با کتابخانه‌ها

جاوااسکریپت مدرن دارای کتابخانه‌های قدرتمندی برای وظایفی مانند تحلیل داده، یادگیری ماشین و مصورسازی‌های پیچیده است. ورکرهای ماژول برای اجرای این کتابخانه‌ها بدون تأثیر بر UI ایده‌آل هستند.

فرض کنید می‌خواهید یک تجمیع داده پیچیده را با استفاده از یک کتابخانه فرضی `data-analyzer` انجام دهید. شما می‌توانید این کتابخانه را مستقیماً به ورکر ماژول خود وارد کنید.

data-analyzer.js (ماژول کتابخانه نمونه):


// data-analyzer.js

export function aggregateData(data) {
  console.log('در حال تجمیع داده‌ها در ورکر...');
  // شبیه‌سازی تجمیع پیچیده
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i];
    // ایجاد یک تأخیر کوچک برای شبیه‌سازی محاسبات
    // در یک سناریوی واقعی، این محاسبات واقعی خواهد بود
    for(let j = 0; j < 1000; j++) { /* delay */ }
  }
  return { total: sum, count: data.length };
}

analyticsWorker.js:


// analyticsWorker.js

import { aggregateData } from './data-analyzer.js';

self.onmessage = function(event) {
  const { dataset } = event.data;
  if (!dataset) {
    self.postMessage({ status: 'error', message: 'هیچ مجموعه داده‌ای ارائه نشده است' });
    return;
  }

  try {
    const result = aggregateData(dataset);
    self.postMessage({ status: 'success', result: result });
  } catch (error) {
    self.postMessage({ status: 'error', message: error.message });
  }
};

console.log('ورکر تحلیل مقداردهی اولیه شد.');

main.js:


// main.js

if (window.Worker) {
  const analyticsWorker = new Worker('./analyticsWorker.js', { type: 'module' });

  analyticsWorker.onmessage = function(event) {
    console.log('نتیجه تحلیل:', event.data);
    if (event.data.status === 'success') {
      document.getElementById('results').innerText = `مجموع: ${event.data.result.total}، تعداد: ${event.data.result.count}`;
    } else {
      document.getElementById('results').innerText = `خطا: ${event.data.message}`;
    }
  };

  // آماده‌سازی یک مجموعه داده بزرگ (شبیه‌سازی شده)
  const largeDataset = Array.from({ length: 10000 }, (_, i) => i + 1);

  // ارسال داده به ورکر برای پردازش
  analyticsWorker.postMessage({ dataset: largeDataset });

} else {
  console.log('وب ورکرها پشتیبانی نمی‌شوند.');
}

HTML (برای نتایج):


<div id="results">در حال پردازش داده‌ها...</div>

ملاحظات جهانی: هنگام استفاده از کتابخانه‌ها، اطمینان حاصل کنید که برای عملکرد بهینه شده‌اند. برای مخاطبان بین‌المللی، بومی‌سازی هرگونه خروجی قابل مشاهده توسط کاربر که توسط ورکر تولید می‌شود را در نظر بگیگیرید، اگرچه معمولاً خروجی ورکر توسط نخ اصلی پردازش و سپس نمایش داده می‌شود که مسئولیت بومی‌سازی را بر عهده دارد.

الگوی ۳: همگام‌سازی داده‌ها به صورت آنی و کش کردن

ورکرهای ماژول می‌توانند اتصالات پایدار (مانند WebSockets) را حفظ کنند یا به صورت دوره‌ای داده‌ها را واکشی کنند تا کش‌های محلی را به‌روز نگه دارند و تجربه کاربری سریع‌تر و واکنش‌گراتری را تضمین کنند، به‌ویژه در مناطقی که تأخیر بالایی تا سرورهای اصلی شما دارند.

cacheWorker.js:


// cacheWorker.js

let cache = {};
let websocket = null;

function setupWebSocket() {
  // با آدرس واقعی WebSocket خود جایگزین کنید
  const wsUrl = 'wss://your-realtime-api.example.com/data';
  websocket = new WebSocket(wsUrl);

  websocket.onopen = () => {
    console.log('WebSocket متصل شد.');
    // درخواست داده‌های اولیه یا اشتراک
    websocket.send(JSON.stringify({ action: 'subscribe', topic: 'updates' }));
  };

  websocket.onmessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      console.log('پیام WS دریافت شد:', message);
      if (message.type === 'update') {
        cache[message.key] = message.value;
        // اطلاع‌رسانی به نخ اصلی درباره کش به‌روز شده
        self.postMessage({ type: 'cache_update', key: message.key, value: message.value });
      }
    } catch (e) {
      console.error('تجزیه پیام WebSocket ناموفق بود:', e);
    }
  };

  websocket.onerror = (error) => {
    console.error('خطای WebSocket:', error);
    // تلاش برای اتصال مجدد پس از یک تأخیر
    setTimeout(setupWebSocket, 5000);
  };

  websocket.onclose = () => {
    console.log('اتصال WebSocket قطع شد. در حال اتصال مجدد...');
    setTimeout(setupWebSocket, 5000);
  };
}

self.onmessage = function(event) {
  const { type, data, key } = event.data;

  if (type === 'init') {
    // به طور بالقوه واکشی داده‌های اولیه از یک API اگر WS آماده نباشد
    // برای سادگی، ما در اینجا به WS تکیه می‌کنیم.
    setupWebSocket();
  } else if (type === 'get') {
    const cachedValue = cache[key];
    self.postMessage({ type: 'cache_response', key: key, value: cachedValue });
  } else if (type === 'set') {
    cache[key] = data;
    self.postMessage({ type: 'cache_update', key: key, value: data });
    // به صورت اختیاری، به‌روزرسانی‌ها را به سرور ارسال کنید
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      websocket.send(JSON.stringify({ action: 'update', key: key, value: data }));
    }
  }
};

console.log('ورکر کش مقداردهی اولیه شد.');

// اختیاری: منطق پاکسازی را در صورت خاتمه ورکر اضافه کنید
self.onclose = () => {
  if (websocket) {
    websocket.close();
  }
};

main.js:


// main.js

if (window.Worker) {
  const cacheWorker = new Worker('./cacheWorker.js', { type: 'module' });

  cacheWorker.onmessage = function(event) {
    console.log('پیام ورکر کش:', event.data);
    if (event.data.type === 'cache_update') {
      console.log(`کش برای کلید به‌روز شد: ${event.data.key}`);
      // در صورت لزوم عناصر UI را به‌روز کنید
    }
  };

  // مقداردهی اولیه ورکر و اتصال WebSocket
  cacheWorker.postMessage({ type: 'init' });

  // بعداً، داده‌های کش شده را درخواست کنید
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'get', key: 'userProfile' });
  }, 3000); // کمی برای همگام‌سازی اولیه داده‌ها صبر کنید

  // برای تنظیم یک مقدار
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'set', key: 'userSettings', data: { theme: 'dark' } });
  }, 5000);

} else {
  console.log('وب ورکرها پشتیبانی نمی‌شوند.');
}

ملاحظات جهانی: همگام‌سازی آنی برای اپلیکیشن‌هایی که در مناطق زمانی مختلف استفاده می‌شوند، حیاتی است. اطمینان حاصل کنید که زیرساخت سرور WebSocket شما به صورت جهانی توزیع شده است تا اتصالات با تأخیر کم را فراهم کند. برای کاربران در مناطقی با اینترنت ناپایدار، منطق اتصال مجدد قوی و مکانیزم‌های جایگزین (مانند نظرسنجی دوره‌ای در صورت عدم موفقیت WebSockets) را پیاده‌سازی کنید.

الگوی ۴: یکپارچه‌سازی با WebAssembly

برای وظایفی که به شدت به عملکرد وابسته هستند، به ویژه آن‌هایی که شامل محاسبات عددی سنگین یا پردازش تصویر هستند، WebAssembly (Wasm) می‌تواند عملکردی نزدیک به بومی ارائه دهد. ورکرهای ماژول یک محیط عالی برای اجرای کد Wasm هستند و آن را از نخ اصلی جدا نگه می‌دارند.

فرض کنید یک ماژول Wasm دارید که از C++ یا Rust کامپایل شده است (مثلاً `image_processor.wasm`).

imageProcessorWorker.js:


// imageProcessorWorker.js

let imageProcessorModule = null;

async function initializeWasm() {
  try {
    // وارد کردن پویا ماژول Wasm
    // مسیر './image_processor.wasm' باید قابل دسترس باشد.
    // ممکن است نیاز باشد ابزار ساخت خود را برای مدیریت وارد کردن Wasm پیکربندی کنید.
    const response = await fetch('./image_processor.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer, {
      // توابع میزبان یا ماژول‌های لازم را در اینجا وارد کنید
      env: {
        log: (value) => console.log('لاگ Wasm:', value),
        // مثال: ارسال یک تابع از ورکر به Wasm
        // این کار پیچیده است، اغلب داده‌ها از طریق حافظه مشترک (ArrayBuffer) منتقل می‌شوند
      }
    });
    imageProcessorModule = module.instance.exports;
    console.log('ماژول WebAssembly بارگذاری و نمونه‌سازی شد.');
    self.postMessage({ status: 'wasm_ready' });
  } catch (error) {
    console.error('خطا در بارگذاری یا نمونه‌سازی Wasm:', error);
    self.postMessage({ status: 'wasm_error', message: error.message });
  }
}

self.onmessage = async function(event) {
  const { type, imageData, width, height } = event.data;

  if (type === 'process_image') {
    if (!imageProcessorModule) {
      self.postMessage({ status: 'error', message: 'ماژول Wasm آماده نیست.' });
      return;
    }

    try {
      // با فرض اینکه تابع Wasm انتظار یک اشاره‌گر به داده‌های تصویر و ابعاد را دارد
      // این نیاز به مدیریت دقیق حافظه با Wasm دارد.
      // یک الگوی رایج تخصیص حافظه در Wasm، کپی کردن داده‌ها، پردازش و سپس کپی کردن نتیجه است.

      // برای سادگی، فرض می‌کنیم imageProcessorModule.process بایت‌های خام تصویر را دریافت می‌کند
      // و بایت‌های پردازش شده را برمی‌گرداند.
      // در یک سناریوی واقعی، از SharedArrayBuffer یا ArrayBuffer استفاده می‌کنید.

      const processedImageData = imageProcessorModule.process(imageData, width, height);

      self.postMessage({ status: 'success', processedImageData: processedImageData });
    } catch (error) {
      console.error('خطای پردازش تصویر Wasm:', error);
      self.postMessage({ status: 'error', message: error.message });
    }
  }
};

// مقداردهی اولیه Wasm هنگام شروع ورکر
initializeWasm();

main.js:


// main.js

if (window.Worker) {
  const imageWorker = new Worker('./imageProcessorWorker.js', { type: 'module' });
  let isWasmReady = false;

  imageWorker.onmessage = function(event) {
    console.log('پیام ورکر تصویر:', event.data);
    if (event.data.status === 'wasm_ready') {
      isWasmReady = true;
      console.log('پردازش تصویر آماده است.');
      // اکنون می‌توانید تصاویر را برای پردازش ارسال کنید
    } else if (event.data.status === 'success') {
      console.log('تصویر با موفقیت پردازش شد.');
      // نمایش تصویر پردازش شده (event.data.processedImageData)
    } else if (event.data.status === 'error') {
      console.error('پردازش تصویر ناموفق بود:', event.data.message);
    }
  };

  // مثال: با فرض اینکه یک فایل تصویر برای پردازش دارید
  // واکشی داده‌های تصویر (مثلاً به عنوان ArrayBuffer)
  fetch('./sample_image.png')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      // شما معمولاً داده‌های تصویر، عرض و ارتفاع را در اینجا استخراج می‌کنید
      // برای این مثال، داده‌ها را شبیه‌سازی می‌کنیم
      const dummyImageData = new Uint8Array(1000);
      const imageWidth = 10;
      const imageHeight = 10;

      // قبل از ارسال داده، منتظر بمانید تا ماژول Wasm آماده شود
      const sendImage = () => {
        if (isWasmReady) {
          imageWorker.postMessage({
            type: 'process_image',
            imageData: dummyImageData, // به عنوان ArrayBuffer یا Uint8Array ارسال کنید
            width: imageWidth,
            height: imageHeight
          });
        } else {
          setTimeout(sendImage, 100);
        }
      };
      sendImage();
    })
    .catch(error => {
      console.error('خطا در واکشی تصویر:', error);
    });

} else {
  console.log('وب ورکرها پشتیبانی نمی‌شوند.');
}

ملاحظات جهانی: WebAssembly افزایش عملکرد قابل توجهی را ارائه می‌دهد که در سطح جهانی مرتبط است. با این حال، اندازه فایل‌های Wasm می‌تواند یک ملاحظه باشد، به ویژه برای کاربرانی با پهنای باند محدود. ماژول‌های Wasm خود را برای اندازه بهینه کنید و در صورتی که اپلیکیشن شما دارای چندین قابلیت Wasm است، از تکنیک‌هایی مانند تقسیم کد (code splitting) استفاده کنید.

الگوی ۵: استخرهای ورکر برای پردازش موازی

برای وظایفی که واقعاً به CPU وابسته هستند و می‌توانند به بسیاری از وظایف فرعی کوچکتر و مستقل تقسیم شوند، یک استخر از ورکرها می‌تواند عملکرد برتری را از طریق اجرای موازی ارائه دهد.

workerPool.js (ورکر ماژول):


// workerPool.js

// شبیه‌سازی یک وظیفه زمان‌بر
function performComplexCalculation(input) {
  let result = 0;
  for (let i = 0; i < 1e7; i++) {
    result += Math.sin(input * i) * Math.cos(input / i);
  }
  return result;
}

self.onmessage = function(event) {
  const { taskInput, taskId } = event.data;
  console.log(`ورکر ${self.name || ''} در حال پردازش وظیفه ${taskId}`);
  try {
    const result = performComplexCalculation(taskInput);
    self.postMessage({ status: 'success', result: result, taskId: taskId });
  } catch (error) {
    self.postMessage({ status: 'error', error: error.message, taskId: taskId });
  }
};

console.log('عضو استخر ورکر مقداردهی اولیه شد.');

main.js (مدیر):


// main.js

const MAX_WORKERS = navigator.hardwareConcurrency || 4; // استفاده از هسته‌های موجود، پیش‌فرض ۴
let workers = [];
let taskQueue = [];
let availableWorkers = [];

function initializeWorkerPool() {
  for (let i = 0; i < MAX_WORKERS; i++) {
    const worker = new Worker('./workerPool.js', { type: 'module' });
    worker.name = `Worker-${i}`;
    worker.isBusy = false;

    worker.onmessage = function(event) {
      console.log(`پیام از ${worker.name}:`, event.data);
      if (event.data.status === 'success' || event.data.status === 'error') {
        // وظیفه تکمیل شد، ورکر را به عنوان در دسترس علامت‌گذاری کنید
        worker.isBusy = false;
        availableWorkers.push(worker);
        // پردازش وظیفه بعدی در صورت وجود
        processNextTask();
      }
    };

    worker.onerror = function(error) {
      console.error(`خطا در ${worker.name}:`, error);
      worker.isBusy = false;
      availableWorkers.push(worker);
      processNextTask(); // تلاش برای بازیابی
    };

    workers.push(worker);
    availableWorkers.push(worker);
  }
  console.log(`استخر ورکر با ${MAX_WORKERS} ورکر مقداردهی اولیه شد.`);
}

function addTask(taskInput) {
  taskQueue.push({ input: taskInput, id: Date.now() + Math.random() });
  processNextTask();
}

function processNextTask() {
  if (taskQueue.length === 0 || availableWorkers.length === 0) {
    return;
  }

  const worker = availableWorkers.shift();
  const task = taskQueue.shift();

  worker.isBusy = true;
  console.log(`تخصیص وظیفه ${task.id} به ${worker.name}`);
  worker.postMessage({ taskInput: task.input, taskId: task.id });
}

// اجرای اصلی
if (window.Worker) {
  initializeWorkerPool();

  // افزودن وظایف به استخر
  for (let i = 0; i < 20; i++) {
    addTask(i * 0.1);
  }

} else {
  console.log('وب ورکرها پشتیبانی نمی‌شوند.');
}

ملاحظات جهانی: تعداد هسته‌های CPU موجود (`navigator.hardwareConcurrency`) می‌تواند در دستگاه‌های مختلف در سراسر جهان به طور قابل توجهی متفاوت باشد. استراتژی استخر ورکر شما باید پویا باشد. در حالی که استفاده از `navigator.hardwareConcurrency` شروع خوبی است، برای وظایف بسیار سنگین و طولانی‌مدت که محدودیت‌های سمت کلاینت ممکن است هنوز برای برخی کاربران یک گلوگاه باشد، پردازش سمت سرور را در نظر بگیرید.

بهترین شیوه‌ها برای پیاده‌سازی جهانی ورکرهای ماژول

هنگام ساخت برای مخاطبان جهانی، چندین بهترین شیوه از اهمیت بالایی برخوردارند:

نتیجه‌گیری

ورکرهای ماژول جاوااسکریپت پیشرفت قابل توجهی در امکان‌پذیر ساختن پردازش پس‌زمینه کارآمد و ماژولار در مرورگر را نشان می‌دهند. با پذیرش الگوهایی مانند صف‌های وظیفه، تخلیه کتابخانه‌ها، همگام‌سازی آنی و یکپارچه‌سازی با WebAssembly، توسعه‌دهندگان می‌توانند اپلیکیشن‌های وب با عملکرد بالا و واکنش‌گرا بسازند که به مخاطبان متنوع جهانی پاسخ می‌دهند.

تسلط بر این الگوها به شما این امکان را می‌دهد که با وظایف محاسباتی سنگین به طور موثر مقابله کنید و یک تجربه کاربری روان و جذاب را تضمین کنید. با پیچیده‌تر شدن اپلیکیشن‌های وب و افزایش انتظارات کاربران برای سرعت و تعامل، استفاده از قدرت ورکرهای ماژول دیگر یک امر لوکس نیست، بلکه یک ضرورت برای ساخت محصولات دیجیتال در سطح جهانی است.

امروز با این الگوها شروع به آزمایش کنید تا پتانسیل کامل پردازش پس‌زمینه را در اپلیکیشن‌های جاوااسکریپت خود باز کنید.